<template>
  <!-- 问卷配置 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">

    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">

      <el-card shadow="never" class="panel">
        <div class="panel-body">
          <div class="panel-header">
            <h4>问卷配置</h4>
            <span>开启后在平台中启动问卷调查模型</span>
          </div>
          <div>
            <el-switch v-model="dataForm.disable" class="panel-switch" />
          </div>
        </div>

        <div v-if="dataForm.disable" style="margin-top: 20px;">

          <el-form-item label="问卷链接" prop="url">
            <el-input v-model="dataForm.url" placeholder="问卷链接" clearable />
          </el-form-item>

          <el-form-item label="消费金额上限" prop="upperLimit">
            <el-input v-model="dataForm.upperLimit" placeholder="消费金额上限(咋天)" clearable />
            <u-tip-info title="不填默认全部" />
          </el-form-item>

          <el-form-item label="消费金额下限" prop="lowerLimit">
            <el-input v-model="dataForm.lowerLimit" placeholder="消费金额下限(咋天)" clearable />
            <u-tip-info title="不填默认全部" />
          </el-form-item>

          <el-form-item label="开启黑名单" prop="blacklistEnabled">
            <el-switch v-model="dataForm.blacklistEnabled" />
          </el-form-item>

          <div v-if="dataForm.blacklistEnabled">
            <el-form-item label="黑名单" prop="blacklist">
              <blacklist v-model="dataForm.blacklist" style="width: 100%" />
            </el-form-item>
          </div>
        </div>

      </el-card>

    </el-form>
  </u-dialog>

</template>

<script>
import blacklist from '@/components/module/blacklist.vue'

/**
 * 业务组件 - 问卷配置
 */
export default {
  name: 'Config',
  components: { blacklist },
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsQuestionnaireList,
      title: '问卷配置',
      dataForm: {
        disable: false,
        url: '',
        upperLimit: '',
        lowerLimit: '',
        blacklist: ''
      },
      rules: {
        url: [
          { required: true, message: '问卷链接', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.loadData()
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载
    loadData() {
      this.api.configFetch().then(res => {
        this.dataForm = res.data
      })
    },
    // 确认
    confirm() {
      const self = this
      const { url, upperLimit, lowerLimit } = self.dataForm
      if (!self.$u.test.url(url)) {
        self.$u.msg('问卷链接格式不正确', 'error')
        return
      }
      if (!self.$u.test.isEmpty(upperLimit)) {
        if (!self.$u.test.amount(upperLimit)) {
          self.$u.msg('金额上限必须为整数', 'error')
          return
        }
      }
      if (!self.$u.test.isEmpty(lowerLimit)) {
        if (!self.$u.test.amount(lowerLimit)) {
          self.$u.msg('金额下限必须为整数', 'error')
          return
        }
      }

      if (!self.$u.test.isEmpty(upperLimit) && !self.$u.test.isEmpty(lowerLimit)) {
        if (parseInt(upperLimit) <= parseInt(lowerLimit)) {
          self.$u.msg('金额上限不能低于下限的数值', 'error')
          return
        }
      }

      self.$confirm('修改问卷配置，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 效验数据格式
        self.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 提交更新数据
            self.api.configUpdate(self.dataForm).then(() => {
              // 通知信息
              self.$u.msg('更改成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }
        })
      }).catch(() => {
      })

      self.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
